* {
   margin: 0;
   padding: 0;
}

p,
h3,
span,
a,
div {
   cursor: pointer;
}

ul li {
   list-style: none;
}

.tab-active {
   color: #f86442;
}

/*icon样式 */
.iconfont {
   color: #ccc;
   font-size: 20px;
   font-weight: 600;
}

.icon-sousuo {
   color: #fff;
   font-weight: 600;
   font-size: 20px;
}

.icon-PCdiannaoban,
.icon-shoujiban {
   color: gray;
   font-size: 24px;
   font-weight: normal;
}

.icon-shuaxin {
   color: gray;
   font-size: 22px;
   font-weight: normal;
}

.icon-erji {
   color: #fff;
   font-weight: normal;
}

/* 头部导航栏样式 */
.header {
   width: 100%;
   box-shadow: 0 0 3px 1px #ccc;
}

.main-nav {
   width: 1080px;
   height: 60px;
   position: relative;
   margin: 0 auto;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.logo-tag {
   float: left;
   height: 60px;
}

.logo-tag::before {
   content: '';
   display: inline-block;
   width: 154px;
   height: 60px;
   background: url('../img/icon.png') 0 no-repeat;
   background-size: 100%;
}

.label-nav {
   display: inline-block;
   margin-left: 5px;
}

.tool-nav {
   display: flex;
   float: right;
   height: 60px;
   align-items: center;
   position: relative;
}

.nav-a1,
.nav-a2,
.nav-a3 {
   display: inline-block;
   width: 74px;
   line-height: 60px;
   text-align: center;
   text-decoration: none;
   color: #72727B;
   box-sizing: border-box;
}

.label-nav-check {
   position: absolute;
   width: 30px;
   height: 3px;
   bottom: 0;
   left: 188px;
   background-color: #f86442;
   transition: left .2s linear;
}

.sort-nav {
   visibility: hidden;
   position: absolute;
   width: 1080px;
   height: 0;
   left: 0;
   top: 60px;
   padding-left: 30px;
   box-sizing: border-box;
   overflow: hidden;
   background-color: #FBFBFC;
   transition: height .2s linear, visibility .2s linear;
   z-index: 2;
}

.sort-nav a {
   float: left;
   width: 110px;
   height: 25px;
   top: 0;
   font-size: 14px;
   line-height: 25px;
   margin-right: 20px;
   text-decoration: none;
   border-radius: 15px;
   background-color: #EBEBEB;
   margin-top: 18px;
   text-align: center;
   color: #72727B;
}

.sort-nav a:hover {
   color: #f86442;
}

.sort-nav:hover {
   visibility: visible;
   height: 150px;

   ~.label-nav-check {
      left: 270px;
   }
}

.nav-a1:hover~.label-nav-check {
   left: 188px;
}

.nav-a2:hover {
   ~.label-nav-check {
      left: 270px;
   }

   ~.sort-nav {
      visibility: visible;
      height: 150px;
   }
}

.nav-a3:hover~.label-nav-check {
   left: 355px;
}

.tool-nav a {
   display: flex;
   align-items: center;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: 13px;
   width: 60px;
   height: 60px;
   text-decoration: none;
   color: gray;
}

.upload:hover .icon-shangchuan {
   color: #f86442;
}

.upload:hover~.upload-more {
   visibility: visible;
}

.upload-more {
   position: absolute;
   visibility: hidden;
   top: 60px;
   left: -100px;
   width: 280px;
   height: 120px;
   border-top: #f86442 2px solid;
   box-shadow: 0 0 3px 0 #ccc;
   background-color: #FBFBFC;
   z-index: 2;
}

.upload-triangle {
   position: absolute;
   top: -10px;
   left: 130px;
   border: 3px solid transparent;
   border-bottom: 3px solid #f86442;
}

.upload-more:hover {
   visibility: visible;
}

.upload-more-content {
   display: flex;
   width: 300px;

   a {
      width: 70px;
      height: 65px;

      img {
         position: absolute;
         width: 280px;
         height: 55px;
         bottom: 0;
         left: 0;
      }
   }

   .a1-item:hover {
      color: #f86442;

      .icon-jianji {
         color: #f86442;
      }
   }

   .a2-item:hover {
      color: #f86442;

      .icon-shangchuan {
         color: #f86442;
      }
   }

   .a3-item:hover {
      color: #f86442;

      .icon-diantai {
         color: #f86442;
      }
   }

   .a4-item:hover {
      color: #f86442;

      .icon-vip {
         color: #f86442;
      }
   }
}

.creat:hover .icon-chuangzuozhongxin {
   color: #f86442;
}

.publish:hover .icon-A {
   color: #f86442;
}

.client:hover .icon-huaban9 {
   color: #f86442;
}

.client:hover~.client-more {
   visibility: visible;
}

.client-more {
   position: absolute;
   visibility: hidden;
   top: 60px;
   right: 0;
   width: 300px;
   height: 190px;
   border-top: #f86442 2px solid;
   box-shadow: 0 0 3px 0 #ccc;
   background-color: #FBFBFC;
   z-index: 2;
}

.client-more-content {
   width: 300px;
   text-align: center;

   span {
      height: 50px;
      line-height: 50px;
      display: block;
      text-align: center;
   }

   .phone-client,
   .pc-client {
      text-align: center;
      float: left;
      width: 150px;

      div {
         font-size: 14px;
         color: red;
         margin-bottom: 10px;
      }
   }

   img {
      width: 70px;
      height: 70px;
      margin-bottom: 10px;
   }

   p {
      font-size: 13px;
      color: #72727B;
   }
}

.client-more:hover {
   visibility: visible;
}

.client-triangle {
   position: absolute;
   top: -10px;
   right: 85px;
   border: 3px solid transparent;
   border-bottom: 3px solid #f86442;
}

.search-box {
   display: inline-block;
   width: 360px;
   height: 40px;
   border: 1px solid #f86442;
   outline: none;
   border-radius: 54px;
   position: relative;
}

#search-ipt:hover~.hot-search {
   visibility: visible;
}

.hot-search {
   position: absolute;
   visibility: hidden;
   width: 250px;
   top: 41px;
   left: 25px;
   padding: 5px 0;
   background-color: #fefefe;
   z-index: 3;
   box-sizing: border-box;
}

.hot-search:hover {
   visibility: visible;
}

.remen {
   padding-left: 5px;
   font-size: 14px;
   color: #72727B;
}

.hot-txt {
   width: 100%;
   height: 25px;
   line-height: 25px;
   padding-left: 15px;
   box-sizing: border-box;
   font-size: 14px;
   color: #40404C;
}

.hot-txt:hover {
   background-color: #F3F4F5;
}

#search-ipt {
   width: 300px;
   height: 40px;
   box-sizing: border-box;
   margin-right: 0;
   border: none;
   outline: none;
   padding-left: 20px;
   border-radius: 54px 0 0 54px;
   float: left;
}

.search-btn {
   width: 60px;
   height: 40px;
   box-sizing: border-box;
   border-radius: 0 54px 54px 0;
   border: none;
   background-image: linear-gradient(90deg, #ff9973 1%, #ff7251 99%);
}

.user-info {
   display: flex;
   width: 60px;
   height: 60px;
   line-height: 60px;
   align-items: center;
   justify-content: center;
}

.user-info img {
   width: 38px;
   height: 38px;
   border-radius: 19px;
}

.user-info:hover~.userinfo-more {
   visibility: visible;
}

.userinfo-more {
   position: absolute;
   visibility: hidden;
   top: 60px;
   right: 0;
   width: 320px;
   height: 160px;
   border-top: #f86442 2px solid;
   box-shadow: 0 0 3px 0 #ccc;
   background-color: #FBFBFC;
   z-index: 2;

   .login-up {
      background-image: url('../img/bac.png');
      background-size: 320px 100px;
      width: 320px;
      height: 70px;
      line-height: 70px;
      padding-left: 15px;
      box-sizing: border-box;
      color: #40404C;
   }

   .login-quick {
      height: 25px;
      padding-left: 15px;
      font-size: 14px;
      color: gray;
      line-height: 25px;
   }

   .login-down {
      display: flex;

      a {
         display: flex;
         text-align: center;
         width: 60px;
         height: 65px;
      }

      a:hover {
         color: #f86442;
      }
   }
}

.userinfo-more:hover {
   visibility: visible;
}

.userinfo-triangle {
   position: absolute;
   top: -10px;
   right: 28px;
   border: 3px solid transparent;
   border-bottom: 3px solid #f86442;
}


/* 内容展示区 */
.main-content {
   width: 1080px;
   margin: 10px auto 0 auto;
   box-sizing: border-box;
}

.content-left {
   float: left;
   width: 800px;
}

.be-like {
   width: 800px;
   height: 243px;
   margin-top: 10px;
}

.be-like-title {
   margin-bottom: 20px;
   padding-right: 20px;
}

.be-like-title-h3 {
   font-weight: normal;
   display: inline-block;
   margin-right: 20px;
}

.be-like-title-h3::before {
   content: '';
   display: inline-block;
   width: 5px;
   height: 15px;
   border-radius: 6px;
   margin-right: 3px;
   background-color: #f86442;
}

.change-like {
   float: right;
   height: 25px;
   font-size: 14px;
}

.change-txt {
   height: 100%;
   float: right;
   margin-left: 10px;
   line-height: 22px;
   text-align: center;
   font-size: 14px;
   color: #72727B;
}

.change-like:hover .icon-shuaxin {
   color: #f86442;
}

.change-like:hover {
   color: #f86442;
}

.be-like-ul,
.audio-book-ul {
   list-style: none;
}

.BL-c {
   width: 140px;
   height: 190px;
   position: relative;
}


.be-like-content ul li {
   float: left;
   margin-right: 20px;
}

.audio-book-content ul li {
   float: left;
   margin-right: 20px;
   margin-bottom: 10px;
}

.play-icon-c {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   width: 0;
   height: 0;
   z-index: 3;
   opacity: 0;
   transition: all .3s ease-in-out;
}

.BL-info-p1 {
   width: 140px;
   font-size: 14px;
   overflow: hidden;
   margin: 5px 0 0 0;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-weight: 600;
}

.BL-info-p1:hover {
   color: #f86442;
}

.BL-info-p2 {
   font-size: 14px;
   color: #72727B;
}

.BL-info-p2:hover {
   color: #f86442;
}

.BL-img-vip {
   width: 45px;
   height: 20px;
   border-radius: 15px 0 100px 0;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1;
}

.BL-img {
   width: 140px;
   height: 140px;
   border-radius: 10px;
   overflow: hidden;
   position: relative;
}

.BL-img::before {
   content: '';
   visibility: hidden;
   width: 140px;
   height: 140px;
   left: 0;
   position: absolute;
   border-radius: 10px;
   background: rgba(0, 0, 0, .2);
   z-index: 2;
}

.BL-img:hover::before {
   visibility: visible;
}

.BL-img:hover {
   .play-icon-c {
      opacity: 1;
      width: 54px;
      height: 54px;
   }

   .BL-img-c,
   .BL-img-vip {
      transform: scale(1.1);
   }
}


.BL-img-c {
   width: 140px;
   height: 140px;
   border-radius: 10px;
}

.BL-play {
   position: absolute;
   bottom: 0;
   right: 0;
   width: 65px;
   height: 20px;
   border-radius: 0 0 10px 0;
   background-color: rgba(0, 0, 0, .8);
   color: #fff;
   font-size: 10px;
   line-height: 20px;
   z-index: 3;

   i {
      float: left;
   }
}

.BL-img:hover+.BL-info-p1 {
   color: #f86442;
}

.audio-book {
   width: 800px;
   margin-top: 20px;
}

.audio-book-title {
   height: 25px;
}

.tab-txt {
   display: inline-block;
   height: 100%;
   line-height: 25px;
   font-size: 13px;
   position: relative;
}

.tab-txt::after {
   content: '';
   display: inline-block;
   width: 1px;
   height: 13px;
   background-color: #ccc;
   margin: 0 10px;
}

.tab-txt:hover {
   color: #f86442;
}

#santi::after {
   display: none;
}


.content-rigth {
   float: right;
   width: 280px;
   height: 673px;
   margin-top: 10px;
}

.right-up-login {
   background-color: #F9F9FA;
}

.up-login-bac {
   width: 100%;
   height: 70px;
   padding: 10px;
   box-sizing: border-box;
   background: url('../img/bac2.png');
   background-size: 280px 70px;
}

.up-login-img {
   width: 50px;
   border-radius: 25px;
   float: left;
   margin-right: 18px;
}

.up-login-txt {
   height: 50px;
   line-height: 50px;
   font-size: 14px;
   color: #72727B;
}

.up-login-button {
   width: 100%;
   height: 65px;
   text-align: center;
   line-height: 65px;
}

.up-login-btn {
   width: 94px;
   height: 26px;
   background-color: #FC5832;
   color: #fff;
   border: none;
   border-radius: 13px;
}

.right-middle-download {
   padding: 8px 0;
   margin-top: 20px;
   height: 88px;
   box-sizing: border-box;
   background-color: #F8F6F7;
}

.middle-download-txt {
   width: 200px;
   height: 72px;
   float: left;
   box-sizing: border-box;
   padding: 15px;
   margin: auto;

   .mdt-span {
      width: 110px;
      height: 22px;
   }

   .mdt-span-one,
   .mdt-span-two {
      float: left;
      height: 22px;
      font-size: 17px;
   }

   .mdt-span-two {
      color: #f86442;
   }

   .mdt-p {
      font-size: 13px;
      height: 18px;
      margin-top: 2px;
      color: #72727B;
   }
}

.shouji-erweima {
   width: 72px;
   height: 72px;
}

.RK-img {
   float: left;
   height: 80px;
   position: relative;
}

.RK-img::before {
   content: '';
   border: 10px solid #FC1733;
   border-bottom: 10px solid transparent;
   border-right: 10px solid transparent;
   position: absolute;
   top: 0;
   left: 0;
}

.second::before {
   content: '';
   border: 10px solid #FD7247;
   border-bottom: 10px solid transparent;
   border-right: 10px solid transparent;
   position: absolute;
   top: 0;
   left: 0;
}

.third::before {
   content: '';
   border: 10px solid #FEC52E;
   border-bottom: 10px solid transparent;
   border-right: 10px solid transparent;
   position: absolute;
   top: 0;
   left: 0;
}

.RK-img::after {
   content: '';
   width: 80px;
   height: 80px;
   position: absolute;
   right: -13px;
   background: url('../img/bac3.png');
   background-size: 80px 80px;
   z-index: -1;
}

.RK-c {
   width: 100%;
   height: 80px;
   margin-bottom: 15px;
   list-style: none;
}

.right-down-ranking {
   margin-top: 17px;
}

.ranking-title {
   width: 100%;
   height: 30px;
   font-size: 21px;
   margin-bottom: 20px;
   line-height: 30px;
}

.RK-img-c {
   width: 80px;
   height: 80px;
}

.RK-info {
   width: 180px;
   height: 80px;
   float: right;
   padding: 18px 0;
   box-sizing: border-box;
}

.RK-info-p1,
.RK-info-p2 {
   height: 22px;
   overflow: hidden;
   font-size: 14px;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.RK-info-p1 {
   font-weight: 600;
}

.RK-info-p2 {
   color: #72727B;
}

.play-RK-c {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   width: 0;
   height: 0;
   z-index: 3;
   opacity: 0;
   transition: all .3s ease-in-out;
}

.RK-c:hover {
   .play-RK-c {
      opacity: 1;
      width: 30px;
      height: 30px;
   }

   .RK-info-p1 {
      color: #f86442;
   }
}

.RK-d {
   width: 100%;
   list-style: none;
   height: 40px;
   box-sizing: border-box;
}

.RK-d:hover {

   .RK-d-rank,
   .RK-d-info {
      color: #f86442;
   }
}

.RK-d-rank {
   float: left;
   height: 40px;
   margin-right: 10px;
   line-height: 40px;
   color: #72727B;
}

.RK-d-info {
   overflow: hidden;
   font-size: 14px;
   text-overflow: ellipsis;
   white-space: nowrap;
   line-height: 40px;
   font-weight: 600;
}